<template>
<div>
  <van-nav-bar
    title="用户注册"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
    <div class="zc-container">
      <van-form @submit="onSubmit">
        <van-field
          v-model="data.username"
          label="用户名"
          placeholder="请输入（默认为手机号）"
          :rules="[{ required: true, message: '请输入' }]"
        />
        <van-field
          v-model="data.nickName"
          label="昵称"
          placeholder="请输入（例如：小明）"
          :rules="[{ required: true, message: '昵称' }]"
        />
        <van-cell  title="性别"  size="large">
          <van-dropdown-menu>
            <van-dropdown-item  v-model="data.sex" :options="optionSex" />
          </van-dropdown-menu>
        </van-cell>
        <van-field
          v-model="data.email"
          label="邮箱"
          placeholder="请输入"
          :rules="[{ required: true, message: '邮箱' }]"
        />
        <van-field
        v-model="data.phonenumber"
        label="电话号码"
        placeholder="请输入"
        :rules="[{ required: true, message: '电话号码' }]"
      />
        <van-field
        v-model="data.address"
        label="籍贯"
        placeholder="请输入"
        :rules="[{ required: true, message: '地址' }]"
      />
        <van-cell  title="所在部门"  size="large">
          <van-dropdown-menu>
            <van-dropdown-item  v-model="data.deptId" :options="optionDept" />
          </van-dropdown-menu>
        </van-cell>
        <van-field
        v-model="data.password"
        name="用户名"
        label="密码"
        placeholder="请输入"
        :rules="[{ required: true, message: '密码' }]"
      />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>

    </div>
</div>

</template>

<script>
  import account from "@/api/account";
  import {Toast} from "vant";
  export default {


    data() {
      return {
        optionSex: [
          { text: '男', value: '1' },
          { text: '女', value: '2' },
        ],
        optionDept: [
          { text: '软件研发部', value: 1 },
          { text: '市场部门', value: 2 },
          { text: '测试部门', value: 3 },
          { text: '财务部门', value: 4 },
          { text: '运维部门', value: 5 },
        ],
        data:{
          sex:'1',
          deptId:1,
          nickName:"",
          email:"",
          phonenumber:"",
          address:"",
          username:"",
          password:"",
        },
        phone: '',
        username: '',
        yzm:'',
        password: '',
        re_password:false,
        is_yzm:false,
        value: '软件研发',
        showPicker: false,
        columns: ['软件研发', '往返'],
      }
    },

    methods: {
      onSubmit(values) {
        account.AccountRegister({
          sex:this.data.sex,
          deptId:this.data.deptId,
          nickName:this.data.nickName,
          email:this.data.email,
          phonenumber:this.data.phonenumber,
          address:this.data.address,
          username:this.data.username,
          password:this.data.password,
          delFlag:0,
          remark:"0",
        })
          .then(res => {
            Toast.success('注册成功');
            this.$router.push({path:'/'});
          })
          .catch(err => {
            // 异常情况
          })
      },
      onClickLeft(){
        history.go(-1)
      }
    }
  }
</script>

<style scoped>
  .zc-container{
    /*margin:10% auto;*/
    margin-top: 2%;
  }
  .van-cell{
    padding-left: 0px;
  }
  .zc-title{
    font-size: 80px;
    text-align: center;
    margin-bottom: 80px;
  }
  .zc-lable{
    /*margin-left: 15px;*/
    margin-right: 80%;
    margin-top: 20px;
    display: block;
    font-size: 16px;
    font-weight: bolder;
  }
/*.van-cell-center{*/
/*  right: 10px;*/
/*}*/
</style>


